<template>
  <div class="layout">
    <!-- 侧边栏 -->
    <aside class="layout-sidebar">
      <div class="sidebar-header">
        AI Shop Admin
      </div>
      <nav class="sidebar-menu">
        <div 
          class="menu-item" 
          :class="{ active: $route.path === '/' }"
        >
          <router-link to="/" class="menu-link">
            <i class="menu-icon"></i>
            <span class="menu-text">首页</span>
          </router-link>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: $route.path.includes('/product') }"
        >
          <router-link to="/product/list" class="menu-link">
            <i class="menu-icon"></i>
            <span class="menu-text">商品管理</span>
          </router-link>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: $route.path.includes('/order') }"
        >
          <router-link to="/order/list" class="menu-link">
            <i class="menu-icon"></i>
            <span class="menu-text">订单管理</span>
          </router-link>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: $route.path.includes('/payment') }"
        >
          <router-link to="/payment/list" class="menu-link">
            <i class="menu-icon"></i>
            <span class="menu-text">支付管理</span>
          </router-link>
        </div>
      </nav>
    </aside>
    
    <!-- 主内容区 -->
    <main class="layout-main">
      <!-- 头部 -->
      <header class="layout-header">
        <div class="header-left">
          <div class="toggle-button">
            <i></i>
          </div>
          <div class="breadcrumb">
            <span class="breadcrumb-item active">
              {{ $route.meta.title || '首页' }}
            </span>
          </div>
        </div>
        <div class="header-right">
          <div class="header-item">
            <i></i>
          </div>
          <div class="header-item">
            <i></i>
          </div>
          <div class="user-info">
            <div class="user-avatar">
              {{ userInfo?.name?.charAt(0) || 'A' }}
            </div>
            <span class="user-name">{{ userInfo?.name || '管理员' }}</span>
          </div>
        </div>
      </header>
      
      <!-- 内容区 -->
      <div class="layout-content">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script>
import { computed } from 'vue'
import useUserStore from '../store/user.js'

export default {
  name: 'Layout',
  setup() {
    const userStore = useUserStore()
    
    const userInfo = computed(() => userStore.getUserInfo)
    
    return {
      userInfo
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式已在components.scss中定义 */
</style>